<!DOCTYPE html>
<html>
<head>
    <title>预约详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
    <link rel="stylesheet" href="css/jquery-weui.css">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=pQFgFpS0VnMXwCRN6cTc1jDOcBVi3XoD"></script>
    <script type="text/javascript" src="js/accessStat.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<style>
    ul {
        list-style: none;
        border-bottom: 1px solid #e8e8e8;
    }

    li {
        margin: 0px;
        padding: 0px;
        height: 123px;
        padding: 0px;
        border-bottom: 1px solid #ffffff;
        background-color: white;
        display: block;
        zoom: 1;
    }

    #gotop div {
        position: absolute;
        margin: auto;
        right: 0px;
        left: 0px;
    }

    .weui-cell__hd {
        width: 20%;
    }

    .page__desc {
        font-size: 16px;
    }

    .weui-cell__hd {
        width: 35%;
    }

    input{
        text-align: right;
    }
/*    img{
        width: 46px;
        height: 31px;
    }*/
</style>
<body>
<div class="page__hd" style="padding: 30px 20px 10px 20px;">
    <h1 class="page__title" style="text-align: center;letter-spacing: 3px;font-size: 18px">预约申请详情</h1>
</div>
<hr>

<div class="weui-cell">
    <div class="weui-cell__hd">
        <img src="../../img/shenqingren.png" style="float: left;padding-right: 15px;width: 2em;">
        <p class="page__desc">申请人</p>
    </div>
    <div class="weui-cell__bd">
        <input id="name" class="weui-input" type="text" placeholder="">
    </div>
</div>
<div class="weui-cell">
    <div class="weui-cell__hd">
        <img src="../../img/yuyueshijian.png" style="float: left;padding-right: 15px;width: 2em;">
        <p class="page__desc" style="padding-top: 2px;">预约时间</p>
    </div>
    <!--        <label class="weui-label">预约时间</label></div>-->
    <div class="weui-cell__bd">
        <input id="startTime" style="text-align: right;font-size: 12px" class="weui-input" value="" type="text"
               placeholder="">
    </div>

</div>
<div class="weui-cell">
    <div class="weui-cell__hd">
        <img src="../../img/yuyueleixing.png" style="float: left;padding-right: 15px;width: 2em;">
        <p class="page__desc">预约类型</p>
    </div>
    <div id="ull" style="width: 65%">

    </div>
</div>
<div class="weui-cell">
    <div class="weui-cell__hd">
        <img src="../../img/jianyitupian.png" style="float: left;padding-right: 15px;width: 2em;">
        <p class="page__desc">检疫证明</p>
    </div>
    <!-- <ul class="weui-uploader__files" id="img">

     </ul>-->
</div>
<div class="weui-cell">
    <!--    <div class="weui-cell__hd">
            <p class="page__desc">检疫证明</p>
        </div>-->
    <ul class="weui-uploader__files" id="img">

    </ul>
</div>
<div style="bottom: 0;width: 100%">
    <button href="javascript:;" id="agress" class="weui-btn weui-btn_primary" style="height: 2em; line-height: 1em;width: 35%;border-radius: 0px;background-color: #4be0e8">同&nbsp&nbsp&nbsp&nbsp意</button>
    <p class="page__desc" style="text-align: center;font-size: 10px;padding-top: 1em;padding-bottom: 1em;">或</p>
    <button href="javascript:;" id="disagress" class="weui-btn weui-btn_warn " style="height: 2em; line-height: 1em;width: 35%;border-radius: 0px;background-color: #ffce3a">拒&nbsp&nbsp&nbsp&nbsp绝</button>
</div>

<!--<input type="file" style="/* visibility: hidden */" capture="camera" accept="image/*,video/*" name="" value="" >-->
</body>
<script src="../singleton.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="../../js/jquery-weui.js"></script>
</html>
<script>
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    var id = getQueryString("id");

    $(".weui-loadmore").hide();
    $(".weui-cells__title").hide();

    var loading = false;  //状态标记

    loadlist(id);

    // =======加载数据loadlist();
    function loadlist(id) {
        var html = "";
        $.ajax({
            type: "POST",
            url: "/shambles/subscribe/subscribeInformation.do",
            data: {
                id: id
            },
            dataType: "json",
            error: function (request) {
                console.log(request);
                $(".weui-loadmore").hide();
                html += "网络连接故障";
                $("#ul").append(html);
            },
            success: function (data) {
                var html = "";
                var imghtml = "";
                var list = data.SubDetail;
                var imglist = data.UrlList;
                var startTime = actionTime(data.subscribeTime);
                var endTime = actionEndTime(data.subscribeTime);
                var timee = startTime+"-"+endTime
                $("#name").val(data.subscribeName);

                $("#startTime").val(timee);


                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {

                        html = html + "<div class='weui-cell'>" +
                            "<div class='weui-cell__hd' style='text-align: right'><label class='weui-label'>" + list[i].type + "</label></div>" +
                            "<div class='weui-cell__bd'>" +
                            "<input id='ty' class='weui-input' type='text' value='" + list[i].number + "'>" +
                            "</div>" +
                            "</div>"
                    }
                    $("#ull").append(html);
                }
                if (imglist.length > 0) {
                    for (var j = 0; j < imglist.length; j++) {
                        imghtml = imghtml +
                            "<li class='weui-uploader__file'>" +
                            "<img src='" + DOMAIN + imglist[j] + "' style='width: 60px'>" +
                            "</li>";
                    }
                    $("#img").append(imghtml);
                }
            }
        });
    }

    //通过预约
    $("#agress").click(function () {
        $.ajax({
            type: "POST",
            url: "/shambles/mobile/booth/dearSubscribe.do",
            data: {
                status: 1,
                id: id
            },
            dataType: "json",
            error: function (request) {
                console.log(request);
                $(".weui-loadmore").hide();
                html += "网络连接故障";
                $("#ul").append(html);
            },
            success: function (RestResponse) {
                var code = RestResponse.code;
                if (code === 1) {
                    $.alert("已同意", function () {
                        location.href = "myTask.html";
                    });
                }
            }
        });
    });

    //预约拒绝
    $("#disagress").click(function () {
        $.ajax({
            type: "POST",
            url: "/shambles/mobile/booth/dearSubscribe.do",
            data: {
                status: 2,
                id: id
            },
            dataType: "json",
            error: function (request) {
                console.log(request);
                $(".weui-loadmore").hide();
                html += "网络连接故障";
                $("#ul").append(html);
            },
            success: function (RestResponse) {
                var code = RestResponse.code;
                if (code === 1) {
                    $.alert("已拒绝", function () {
                        location.href = "myTask.html";
                    });
                }
            }
        });
    })

    function actionTime(value) {
        var date = new Date(value);
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }

    function actionEndTime(value) {
        var date = new Date(value);
        h = date.getHours() + 3 + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return  h + m + s;
    }


    $(window).scroll(function () {  //只要窗口滚动,就触发下面代码
        var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
        if (scrollt > 200) {  //判断滚动后高度超过200px,就显示
            $("#gotop").fadeIn(400); //淡入
        } else {
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
        }
    });


    function getDistance(lng, lat) {
        var pointA = new BMap.Point(longitude, latitude);  // 创建点坐标A--大渡口区
        var pointB = new BMap.Point(lng, lat);  // 创建点坐标B--江北区
        var d = map.getDistance(pointA, pointB) / 1000;
        return d.toFixed(2) + ' KM';  //获取两点距离,保留小数点后两位
    }

    $("#gotop").on("click", function () { //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
        $("html,body").animate({scrollTop: "0px"}, 200);

    });
</script>

<script src="../../js/previewImage.min.js"></script>

<script>

    var im = {};
    /**
     * 得到多个元素
     * @public
     */
    im.all = function (selector, contextElement) {
        var nodeList,
            list = [];
        if (contextElement) {
            nodeList = contextElement.querySelectorAll(selector);
        } else {
            nodeList = document.querySelectorAll(selector);
        }
        if (nodeList && nodeList.length > 0) {
            list = Array.prototype.slice.call(nodeList);
        }
        return list;
    }

    /**
     * 将事件委托给父元素
     * @public
     * @param  array     $el         父元素
     * @param  string    eventType  事件类型名称
     * @param  string    selector   目标的选择器
     * @param  function  fn
     */
    im.delegate = function ($el, eventType, selector, fn) {
        if (!$el) {
            return;
        }
        $el.addEventListener(eventType, function (e) {
            var targets = im.all(selector, $el);
            if (!targets) {
                return;
            }
            // findTarget:
            for (var i = 0; i < targets.length; i++) {
                var $node = e.target;
                while ($node) {
                    if ($node == targets[i]) {
                        fn.call($node, e);
                        break; //findTarget;
                    }
                    $node = $node.parentNode;
                    if ($node == $el) {
                        break;
                    }
                }
            }
        }, false);
    };


    im.delegate(document.querySelector('#img'), 'click', 'img', function () {

        var urls = [];
        var imgs = im.all('img', im.all('#img')[0]);
        imgs.forEach(function (v, i) {
            var str = v.src;
            var url = str.replace(/\/compressFile/, "");
            urls.push(url);
        })

        var thisStr = this.src;
        var current = thisStr.replace(/\/compressFile/, "");
        console.log(current);
        var obj = {
            urls: urls,
            current: current
        };
        previewImage.start(obj);
    });

</script>